<script setup lang="ts"></script>

<template>
  <div class="trend">
    <MyTrend text="营业额" type="up" />
    <MyTrend text="销售额" type="down" />
  </div>
  <div class="trend">
    <MyTrend text="营业额" type="up" upIconColor="blue" />
    <MyTrend text="销售额" type="down" downIconColor="green" />
  </div>
  <div class="trend">
    <MyTrend text="营业额" type="up" upIconColor="blue">营业业绩</MyTrend>
    <MyTrend text="销售业绩" type="down" downIconColor="green" />
  </div>
  <div class="trend">
    <MyTrend text="营业额" type="up" upIconColor="blue">营业业绩</MyTrend>
    <MyTrend text="销售业绩" type="down" reverseColor downIconColor="green" />
  </div>
  <div class="trend">
    <MyTrend text="营业额" type="up" upIconColor="blue" upTextColor="purple">营业业绩</MyTrend>
    <MyTrend text="销售业绩" type="down" reverseColor downIconColor="green" downTextColor="purple" />
  </div>
  <div class="trend">
    <MyTrend text="营业额" type="up" upIconColor="blue" upTextColor="purple" upIcon="el-icon-bottomleft">营业业绩</MyTrend>
    <MyTrend text="销售业绩" type="down"  downIconColor="green" downIcon="el-icon-bottomright" />
  </div>
</template>

<style lang="scss" scoped>
.trend {
  display: flex;
  column-gap: 50px;
  margin-bottom: 50px;
}
</style>
